<template>
  <div id="app">
    <!-- <div class="page-top">
      <PageTop></PageTop>
    </div> -->
    <div class="title">目录清单审核</div>
    <div class="context">
      <table>
        <tbody>
          <tr>
            <td class="tdl">是否存在子项：</td>
            <td class="tdr">否</td>
            <td class="tdl">是否纳入国家项目：</td>
            <td class="tdr">否</td>
            <td class="tdl">目标清单状态：</td>
            <td class="tdr">待审核</td>
          </tr>
          <tr>
            <td class="tdl">计划生效日期：</td>
            <td class="tdr">2021-05-31</td>
            <td class="tdl">计划取消日期：</td>
            <td class="tdr">2022-05-31</td>
            <td class="tdl">目录来源：</td>
            <td class="tdr">录入</td>
          </tr>
          <tr>
            <td class="tdl">目录版本号：</td>
            <td class="tdr" colspan="6">1</td>
          </tr>
          <tr>
            <td class="tdl">设定依据：</td>
            <td class="tdr" colspan="6">123</td>
          </tr>
          <tr>
            <td class="tdl">目录清单附件：</td>
            <td class="tdr" colspan="6" style="color: #1e8fff">清单附件.pdf</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="b-title">动态新增审核信息</div>
    <div class="context">
      <table>
        <tbody>
          <tr>
            <td class="tdl">审核状态：</td>
            <td class="tdr" colspan="6">
              <el-row>
                <el-button>审核通过</el-button>
                <el-button>审核不通过</el-button>
              </el-row>
            </td>
          </tr>
          <tr style="color: #79838f">
            <td class="tdl" style="height: 126px">
              <span style="color: red">*</span>
              审核意见：
            </td>
            <td class="tdr" colspan="6">请输入审核意见</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="footer">
      <div class="box">
        <div class="cancel" @click="onShow">取消</div>
        <div class="determine" @click="onShow">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import PageTop from "../../../components/PageTop";
  export default {
    components: {
      // PageTop
    },
    data() {
      return {};
    },
    methods: {
      onShow() {
        this.$emit('onShow', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  #app {
    width: 94%;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    .page-top {
      height: 90px;
      width: 100%;
    }
    .title {
      font-size: 24px;
      color: #222;
      font-weight: bold;
      padding: 30px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8dfe9;
    }
    .context {
      padding: 30px 40px;
      box-sizing: border-box;
      table,
      td {
        border: 1px solid #d8dfe9;
        border-collapse: collapse;
      }
      table {
        width: 100%;
        tr {
          .tdl {
            width: 200px;
            height: 63px;
            line-height: 63px;
            text-align: right;
            font-size: 18px;
            color: #222;
            background: #eff3f9;
          }
          .tdr {
            padding-left: 15px;
            width: 374px;
          }
        }
      }
    }
    .b-title {
      padding: 0 0 20px 40px;
      font-size: 20px;
      font-weight: bold;
      color: #222;
      padding: 30px 40px;
      box-sizing: border-box;
    }
    .footer {
      width: 100%;
      .box {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        .cancel {
          width: 175px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: #d8dfe9;
          opacity: 1;
          border-radius: 5px;
          margin-right: 10px;
          cursor: pointer;
        }
        .determine {
          cursor: pointer;
          width: 175px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: linear-gradient(90deg, #00b9ff 0%, #1e87ff 100%);
          opacity: 1;
          border-radius: 5px;
        }
      }
    }
  }
</style>
